import { useState } from 'react';
import { Card, Row, Col, Button, Space } from 'antd';

// 模拟热门课程数据
export const topCourses = [
  { id: 1, name: 'JavaScript入门到入土', sales: 323234 },
  { id: 2, name: '前端开发项目实战', sales: 323234 },
  { id: 3, name: '微信小程序入门到精通', sales: 323234 },
  { id: 4, name: 'JavaScript入门到精通', sales: 323234 },
  { id: 5, name: 'TypeScript基础', sales: 323234 },
];

const CourseRanking: React.FC = () => {
  const [dateRange, setDateRange] = useState('今日');

  const handleDateRangeChange = (range: string) => {
    setDateRange(range);
  };

  // 格式化销售额显示
  const formatSales = (sales: number) => {
    return sales.toLocaleString();
  };

  // 获取排名数字的样式
  const getRankStyle = (index: number) => {
    if (index === 0) {
      return {
        background: '#000',
        color: '#fff',
        width: '20px',
        height: '20px',
        borderRadius: '2px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: 'bold',
        marginRight: '10px'
      };
    }
    if (index === 1) {
      return {
        background: '#000',
        color: '#fff',
        width: '20px',
        height: '20px',
        borderRadius: '2px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: 'bold',
        marginRight: '10px'
      };
    }
    if (index === 2) {
      return {
        background: '#000',
        color: '#fff',
        width: '20px',
        height: '20px',
        borderRadius: '2px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: 'bold',
        marginRight: '10px'
      };
    }
    return {
      background: '#f0f0f0',
      color: '#666',
      width: '20px',
      height: '20px',
      borderRadius: '2px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      marginRight: '10px'
    };
  };

  return (
    <Card className="dashboard-card" bodyStyle={{ padding: '16px', height: '300px', display: 'flex', flexDirection: 'column' }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <div className="date-range-buttons" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: '16px' }}>
            <Space>
              <Button
                style={{ padding: '4px 16px' }}
                type={dateRange === '今日' ? 'primary' : 'default'}
                size="small"
                onClick={() => handleDateRangeChange('今日')}
              >
                今日
              </Button>
              <Button
                style={{ padding: '4px 16px' }}
                type={dateRange === '本周' ? 'primary' : 'default'}
                size="small"
                onClick={() => handleDateRangeChange('本周')}
              >
                本周
              </Button>
              <Button
                style={{ padding: '4px 16px' }}
                type={dateRange === '本月' ? 'primary' : 'default'}
                size="small"
                onClick={() => handleDateRangeChange('本月')}
              >
                本月
              </Button>
              <Button
                style={{ padding: '4px 16px' }}
                type={dateRange === '本年' ? 'primary' : 'default'}
                size="small"
                onClick={() => handleDateRangeChange('本年')}
              >
                本年
              </Button>
            </Space>
          </div>
        </Col>
        <Col span={24}>
          <div className="course-ranking">
            <h4 style={{ margin: 0, marginBottom: '16px', fontSize: '14px', fontWeight: 'bold' }}>排行榜</h4>
            <div>
              {topCourses.map((course, index) => (
                <div
                  key={course.id}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    marginBottom: '10px',
                    paddingVertical: '4px'
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={getRankStyle(index)}>
                      {index + 1}
                    </span>
                    <p style={{ fontSize: '12px', color: '#333', margin: 0, flex: 1 }}>
                      {course.name}
                    </p>
                  </div>
                  <p style={{ fontSize: '12px', color: '#3b82f6', margin: 0, minWidth: '70px', textAlign: 'right' }}>
                    {formatSales(course.sales)}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </Col>
      </Row>
    </Card>
  );
};

export default CourseRanking;